<h1><%= t '.title' %></h1>
<div id="jobs">
  <% @jobs.each do |job| %>
  <div class="job">
    <div class="spectrum-thumb" id="spectrum-<%= job.id %>"></div>
    <dl class="job-info">
      <dt><%= t '.run_at' %></dt>
      <dd><%= job.created_at.to_date.to_s(:long) %></dd>

      <dt><%= t '.molecule' %></dt>
      <dd><%= format_chemical_formula(job.formula) %></dd>

      <dt><%= t '.description' %></dt>
      <dd><%= job.description %></dd>
    </dl>
    <ul class="job-controls">
      <li><%= link_to(t('generic.details'), job, :method => :get, :title => t('.tooltip.details')) %></li>
      <li><%= link_to(t('generic.edit'), edit_job_url(job), :title => t('.tooltip.edit')) %></li>
      <li><%= link_to(t('generic.delete'), job, :method => :delete, :confirm => t('generic.confirm'), :title => t('.tooltip.delete')) %></li>
      <ul>
  </div>
  <% end %>
</div>

<% content_for :javascript do %>
$(document).ready(function() {
  <% @jobs.each do |job| %>
  Spectrum("spectrum-<%= job.id %>", 480, 150, <%= job.peaks.to_json %>);
  <% end %>
});
<% end %>
